<template>
    <div class="content">
        <!--头部-->
        <div class="header-setting">
            <a-breadcrumb class="breadcrumb">
                <a-breadcrumb-item>
                    <a href="../main">首页</a>
                </a-breadcrumb-item>
                <a-breadcrumb-item>收费管理</a-breadcrumb-item>
                <a-breadcrumb-item>营收统计</a-breadcrumb-item>
            </a-breadcrumb>
            <!--查询条件-->
            <div class="box-condition-body">
                <div class="box-condition-item">
                    <div class="box-item">
                        <div style="margin: 0 50px">收费时间</div>
                        <template>
                            <div class="button_time">
                                <a-button
                type="primary" @click="button_time(0)" :style="computedStyle(0)">今天</a-button>
                                <a-button
                type="primary" @click="button_time(1)" :style="computedStyle(1)">昨天</a-button>
                                <a-button
                type="primary" @click="button_time(2)" :style="computedStyle(2)">本周</a-button>
                                <a-button
                type="primary" @click="button_time(3)" :style="computedStyle(3)">上周</a-button>
                                <a-button
                type="primary" @click="button_time(4)" :style="computedStyle(4)">本月</a-button>
                            </div>
                        </template>
                        <template>
                            <div style="margin: auto 50px">
                                <a-range-picker
                                    :showTime="{ format: 'HH:mm' }"
                                    format="YYYY-MM-DD HH:mm"
                                    :placeholder="['开始时间', '结束时间']"
                                    @ok="onOk"
                                    @change="onChange"
                                    :value="rangePicker()" />
                            </div>
                        </template>
                    </div>
                </div>
                <div class="box-condition-item">
                    <div style="margin: 0 50px">停车点</div>
                    <template>
                        <a-select style="margin: 0 200px 0 50px; width: 200px"
                                  showSearch
                                  placeholder="选择停车点"
                                  optionFilterProp="children"
                                  @select="selectPark"
                                  :allowClear="true"
                                  @change="selectChanged"
                        >
                            <a-select-option v-for="p in parks" :key="p.id" :value="p.id">{{p.parkName}}
                            </a-select-option>
                        </a-select>
                    </template>
                    <div style="margin: 0 50px">时间统计类型</div>
                    <a-button
                type="primary" style="margin: 0 0 0 20px" @click="timeStatistics(1)">日</a-button>
                    <a-button
                type="primary" style="margin: 0 0 0 20px" @click=" timeStatistics(2)">月</a-button>


                    <!--<div style="margin: 0 50px">收费类型</div>
                    <a-button
                type="primary" style="margin: 0 0 0 20px">全部</a-button>
                    <a-button
                type="primary" style="margin: 0 0 0 20px">现金支付</a-button>
                    <a-button
                type="primary" style="margin: 0 0 0 20px">移动支付</a-button>-->
                    <div style="margin: 0 15px 0 50px">停车位类型</div>
                    <template>
                        <a-select
                                showSearch
                                placeholder="停车位类型"
                                optionFilterProp="children"
                                style="width: 200px"
                                :allowClear="allowClear"
                                @select="selectRoadType"
                        >
                            <a-select-option
                                    v-for="p in roadTypeOption"
                                    :key="p.value"
                                    :value="p.value"
                            >{{ p.label }}
                            </a-select-option>
                        </a-select>
                    </template>
                </div>
            </div>
        </div>

        <div class="box-form">
            <!--工具栏-->
            <div class="box-tool">
                <div>单位：元</div>
                <div style="display: flex">
                    <a-button
                type="primary" @click="downloadDataClick" icon="download">导出</a-button>
                </div>
            </div>
            <!--数据表格-->
            <div class="box-table">
                <a-table :columns="columns"
                         :dataSource="dataSource"
                         :pagination="pagination"
                         bordered size="small"
                         :scroll="scroll"
                         :customRow="customRow"
                         :rowClassName="setRowClassName"
                         @change="tableChange"
                >
                    <template slot="amountShould" slot-scope="text">
                        <div>{{text==undefined||text==''?text:text/100}}</div>
                    </template>
                    <template slot="amountReality" slot-scope="text">
                        <div>{{text==undefined||text==''?text:text/100}}</div>
                    </template>
                    <template slot="sumFavorableAmount" slot-scope="text">
                        <div>{{text==undefined||text==''?text:text/100}}</div>
                    </template>
                    <template slot="amountShouldButNot" slot-scope="text">
                        <div>{{text==undefined||text==''?text:text/100}}</div>
                    </template>
                    <!-- 脚步 -->
                    <template slot="footer" v-if="dataSource.length != 0">
                        <div style="display: flex; height: 30px; margin: 0 -16px;">
                            <div style="flex: 1 1 65%; height: 100%; padding-left: 1%;">
                                合计（当前页）
                            </div>
                            <div style="flex: 1 0 11.7%; height: 100%; padding-left: 0.3%;">
                                {{computedDue}}
                            </div>
                            <div style="flex: 1 0 12%; height: 100%;  padding-left: 0.3%;">
                              {{computedFa}}
                            </div>
                            <div style="flex: 1 0 12%; height: 100%;  padding-left: 0.3%;">
                                {{computedNet}}
                            </div>
                            <div style="flex: 1 0 12.1%; height: 100%; ">
                                {{computedCollect}}
                            </div>
                        </div>
                    </template>
                    <template slot="footer" v-if="dataSource.length != 0">
                        <div style="display: flex; height: 30px; margin: 0 -16px;">
                            <div style="flex: 1 1 65%; height: 100%; padding-left: 1%;">
                                总合计
                            </div>
                            <div style="flex: 1 0 11.7%; height: 100%; padding-left: 0.3%;">
                                {{this.allComputedDue}}
                            </div>
                            <div style="flex: 1 0 12%; height: 100%;  padding-left: 0.3%;">
                                {{this.allComputedFa}}
                            </div>
                            <div style="flex: 1 0 12%; height: 100%;  padding-left: 0.3%;">
                                {{this.allComputedNet}}
                            </div>
                            <div style="flex: 1 0 12.1%; height: 100%; ">
                                {{this.allComputedCollect}}
                            </div>
                        </div>
                    </template>
                </a-table>
            </div>
        </div>

    </div>
</template>

<script>
    import moment from 'moment'
    import CommonApi from "../../api/CommonApi";
    import RevenueStatisticsApi from '../../api/charge/RevenueStatistics';


    const columns = [
        {
            title: "序号",
            dataIndex: "no",
            width: '5%'
        },
        {
            title: "停车点"
            , dataIndex: "parkName"
            , width: '6%'
        },
        {
            title: "地址"
            , dataIndex: "district"
            , width: '6%'
        },
        {
            title: "停车位类型"
            , dataIndex: "roadTypeName"
            , width: '8%'
        },
        {
            title: "车位数"
            , dataIndex: "truckSpaceNum"
            , width: '10%'
        },
        // {
        //     title: "巡查员"
        //     , dataIndex: "userName"
        //     , width: '10%'
        // },
        {
            title: "时间"
            , dataIndex: "dateTime"
            , width: '10%'
        },
        {
            title: "应收"
            , dataIndex: "sumShouldMoney",
            scopedSlots: {customRender: 'amountShould'},
            width: '10%'
        },
        {
            title: "优惠"
            , dataIndex: "sumFavorableAmount",
            scopedSlots: {customRender: 'sumFavorableAmount'},
            width: '10%'
        },
        {
            title: "实收"
            , dataIndex: "sumRealityMoney",
            scopedSlots: {customRender: 'amountReality'},
            width: '10%'
        },
        {
            title: "未收"
            , dataIndex: "sumShouldMoneyButNot"
            , scopedSlots: {customRender: 'amountShouldButNot'}
            , width: '10%'
        },
    ];

    const dataSource = [];

    const queryCondition = {
        timeType: "",
        parkId: "",
        startTimeStamp: "",
        endTimeStamp: "",
        timeScreenCondition: 6,
        limit: "10",
        curr: "1",
    };

    export default {
        name: "RevenueStatistics",

        /*数据层*/
        data() {
            return {
                allComputedDue: 0,
                allComputedFa: 0,
                allComputedNet: 0,
                allComputedCollect: 0,
                parks: [],
                selectId: -1,
                momentArr: [],
                columns: columns,
                dataSource: dataSource,
                /*分页插件*/
                pagination: {
                    showTotal: total => `共${total}条`,
                    total: 0,
                    current: 1,
                    defaultCurrent: 1,
                    showQuickJumper: true,
                    defaultPageSize: 10
                },
                /*表格固定头部*/
                scroll: {
                    y: 550,
                },
                tableState: {
                    rowId: -1,
                },
                /*当前选中的行数据*/
                currRowData: "",
                selectParkId: "",
                timeStatisticsType: "1",
                queryCondition,
                allowClear: true,
                searchIsRoad: "",
                roadTypeOption: [
                    { value: 1, label: "路边车位" },
                    { value: 2, label: "停车场车位" },
                ],
            }
        },

        /*方法层*/
        methods: {

            /*时间按钮控制*/
            button_time(e) {
                this.selectId = e;
                let momentStart;
                let momentEnd;
                switch (e) {
                    case 0:
                        momentStart = moment().startOf('day');
                        momentEnd = moment().endOf('day');
                        break;
                    case 1:
                        momentStart = moment().add('day', -1).startOf('day');
                        momentEnd = moment().add('day', -1).endOf('day');
                        break;
                    case 2:
                        momentStart = moment().week(moment().week()).startOf('week');
                        momentEnd = moment().week(moment().week()).endOf('week');
                        break;

                    case 3:
                        momentStart = moment().week(moment().week() - 1).startOf('week');
                        momentEnd = moment().week(moment().week() - 1).endOf('week');
                        break;
                    case 4:
                        momentStart = moment().month(moment().month()).startOf('month');
                        momentEnd = moment().month(moment().month()).endOf('month');
                        break;
                    default :
                        break;
                }
                this.momentArr[0] = momentStart;
                this.momentArr[1] = momentEnd;
                this.queryData();
            },
            /*日期选择*/
            onChange(date) {
                this.selectId = -1;
                this.momentArr = date;
            },
            onOk() {
                this.selectId = -1;
                this.queryData();
            },
            rangePicker() {
                return this.momentArr;
            },

            /*下拉框*/
            initParkList() {
                CommonApi.getParkList().then((data) => {
                    this.parks = data.data;
                }).catch(err => {
                    console.log("error:", err);
                });
            },
            selectPark(value) {
                this.selectParkId = value;
                this.queryData();
            },
            selectChanged(value) {
                if (value == undefined) {
                    this.selectParkId = "";
                    this.queryData();
                }
            },
            timeStatistics(type) {
                this.timeStatisticsType = "1";
                if (type != undefined) {
                    this.timeStatisticsType = type;
                }
                this.queryData();
            },
            tableChange(page) {
                this.queryCondition.curr = page.current;
                this.queryData();
            },

            queryData() {
                let condition = this.getQueryCondition();
                RevenueStatisticsApi.statistics(condition)
                    .then((data) => {
                        let { list, total, pageNum, pageSize } = data.data;
                        let array = list || [];
                        array = array.map((item, index) => {
                            return { ...item, no: total - (pageNum - 1) * pageSize - index };
                        })
                        this.dataSource = array;
                        this.pagination.total = total;
                        this.pagination.current = pageNum;
                    })
                    .catch(error => {
                        console.log("获取收费统计数据异常！", error);
                    });
                //总合计
                RevenueStatisticsApi.statisticsAll(condition)
                    .then((data) => {
                        this.allComputedDue = 0;
                        this.allComputedFa = 0;
                        this.allComputedNet = 0;
                        this.allComputedCollect = 0;
                        for(let i = 0;i<data.data.length;i++){
                            this.allComputedDue = this.allComputedDue + data.data[i].sumShouldMoney;
                            this.allComputedFa = this.allComputedFa + data.data[i].sumFavorableAmount;
                            this.allComputedNet = this.allComputedNet + data.data[i].sumRealityMoney;
                            this.allComputedCollect = this.allComputedCollect + data.data[i].sumShouldMoneyButNot;
                        }
                        this.allComputedDue = this.allComputedDue/100;
                        this.allComputedFa = this.allComputedFa/100;
                        this.allComputedNet = this.allComputedNet/100;
                        this.allComputedCollect = this.allComputedCollect/100;
                    })
                    .catch(error => {
                        console.log("获取收费统计数据异常！", error);
                    });

            },
            getQueryCondition() {
                let condition = this.queryCondition;
                let beginMoment = this.momentArr[0];
                let endMoment = this.momentArr[1];
                if (beginMoment != undefined && endMoment != undefined) {
                    condition.startTimeStamp = new Date(beginMoment).getTime() / 1000;
                    condition.endTimeStamp = new Date(endMoment).getTime() / 1000;
                    condition.timeScreenCondition = 6;
                } else {
                    condition.timeScreenCondition = 0;
                }
                condition.parkId = this.selectParkId;
                condition.timeType = this.timeStatisticsType;
                condition.roadType = this.searchIsRoad;
                return condition;
            },

            downloadDataClick() {
                let condition = this.getQueryCondition();
                RevenueStatisticsApi.exportStatisticsExcel(condition).then((res) => {
                    const link = document.createElement('a');
                    const blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});
                    let fileName = decodeURIComponent(res.headers.filename);
                    link.style.display = 'none';
                    link.href = URL.createObjectURL(blob);
                    link.setAttribute('download', `${fileName}`);
                    link.click();
                }).catch(err => {
                    let data = err.data;
                    if (data) {
                        return this.$message.warn(data);
                    }
                });
            },


            /*表格*/
            customRow(record, index) {
                return {
                    on: { // 事件
                        click: () => {
                            this.currRowData = record;
                            this.tableState.rowId = index;
                        },       // 点击行
                    },
                }
            },
            setRowClassName(record, index) {
                return index === this.tableState.rowId ? 'clickRowStyl' : '';
            },
            selectRoadType(value) {
                this.searchIsRoad = value;
                this.queryData();
            },
        },

        /*计算层*/
        computed: {
            computedStyle() {
                return function (selectId) {
                    return this.selectId == selectId ? "" : "";
                }
            },

            computedDue() {
                let dataSource = this.dataSource || [];

                let result = 0;
                dataSource.forEach(item => {
                    result += item.sumShouldMoney;
                })
                return result / 100;
            },

            computedNet() {
                let dataSource = this.dataSource || [];
                let result = 0;
                dataSource.forEach(item => {
                    result += item.sumRealityMoney;
                })
                return result / 100;
            },
            computedFa() {
                let dataSource = this.dataSource || [];
                let result = 0;
                dataSource.forEach(item => {
                    result += item.sumFavorableAmount;
                })
                return result / 100;
            },

            computedCollect() {
                let dataSource = this.dataSource || [];
                let result = 0;
                dataSource.forEach(item => {
                    result += item.sumShouldMoneyButNot;
                })
                return result / 100;
            },
        },
        /*渲染层*/
        mounted() {
            this.initParkList();
            // this.queryData();
            this.button_time(0);
        },
    }
</script>

<style>
    .content {
        width: 100%;
        height: 100%;
    }

    .header-setting {
        width: 100%;
        /* height: 174px; */
        background: #fff;
    }

    .header-setting .breadcrumb {
        margin-left: 41px;
        padding-top: 15px;
    }

    /*表格行选中背景颜色*/
    .clickRowStyl {
        background-color: #C1E0FD;
    }

    .box-condition-item {
        display: flex;
        align-items: center;
        min-width: 1500px;
        padding: 15px 0;
    }

    .box-condition-item .box-item {
        display: flex;
        align-items: center;
        justify-content: center;
        /*margin: 5px 5px 5px 5px;*/
    }

    .button_time button {
        margin-left: 10px;
    }

    /* 表单 */
    .box-form {
        padding-left: 40px;
        padding-right: 40px;
        min-height: 705px;
        background: #fff;
        margin-top: 8px;
    }

    .box-form .box-tool {
        padding-top: 11px;
        margin: 8px 0;
        width: 100%;
        /* flex */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

</style>
